<template>
  <div id="app">
    <el-container>
      <el-header style="font-size: 20px" class="header_title">
        <div>就爱科技</div>
        <div>
          <el-dropdown>
            <i class="el-icon-user-solid" style="margin-right: 15px;width:25  px"></i>
             <li class="layui-nav-item" lay-unselect="">
    <a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img"></a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">子级菜单</a></dd>
      <dd><a href="javascript:;">横线隔断</a></dd>
      <hr>
      <dd style="text-align: center;"><a href="">退出</a></dd>
    </dl>
  </li>
          </el-dropdown>
          <el-button type="text" style="color: #000">登录</el-button>
        </div>
      </el-header>

      <el-drawer title="个人名片" :visible.sync="drawer" :direction="direction">
        <div class="sub-title"></div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item>
            <el-avatar :size="80" :src="circleUrl">头像</el-avatar>
          </el-form-item>
          <el-form-item>
            <el-input
              id="inputDeep"
              v-model="form.name"
              type="text"
              placeholder="昵称"
              style="width: 150px"
              maxlength="10"
              show-word-limit
              v-if="form.seen"
            ></el-input>
            <span v-else>{{ form.name }}</span>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="form.resource" v-if="form.seen">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
            <span v-else>{{ form.resource }}</span>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-col :span="11" v-if="form.seen">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.date1"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
            <span v-else>{{ form.date1 }}</span>
          </el-form-item>

          <el-form-item label="家庭住址">
            <el-input
              type="textarea"
              v-model="form.address"
              v-if="form.seen"
            ></el-input>
            <span v-else>{{ form.address }}</span>
          </el-form-item>

          <el-form-item label="自我介绍">
            <el-input
              type="textarea"
              v-model="form.desc"
              v-if="form.seen"
            ></el-input>
            <span v-else>{{ form.desc }}</span>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="edit" v-if="!form.seen">
              编辑</el-button
            >
            <el-button type="primary" @click="save" v-else>保存</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>

      <!-- 轮播图 -->
      <el-carousel
        :interval="3000"
        type="card"
        height="300px"
        class="carousel_title"
      >
        <el-carousel-item v-for="item in imgs_list" :key="item.id">
                     <img :src="item.idView" class="image">
        </el-carousel-item>
      </el-carousel>

      <!-- 左侧榜单aside -->
      <el-container>
        <el-aside width="250px">
          <el-card>
            <div slot="header" class="clearfix">
              <span>四十八小时阅读排行</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                icon="el-icon-d-arrow-right"
                >更多</el-button
              >
            </div>
            <div v-for="o in 4" :key="o" class="text item">
              <el-link href="https://element.eleme.io" target="_blank">{{
                "文章 " + o
              }}</el-link>

              <el-link target="_blank" style="left: 100px">{{
                "作者名"
              }}</el-link>
            </div>
          </el-card>

          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>十天编辑推荐</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                icon="el-icon-d-arrow-right"
                >更多</el-button
              >
            </div>
            <div v-for="o in 4" :key="o" class="text item">
              <el-link href="https://element.eleme.io" target="_blank">{{
                "文章 " + o
              }}</el-link>

              <el-link target="_blank" style="left: 100px">{{
                "编辑名"
              }}</el-link>
            </div>
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>10天排行评论</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                icon="el-icon-d-arrow-right"
                >更多</el-button
              >
            </div>
            <div v-for="o in 4" :key="o" class="text item">
              <el-link href="https://element.eleme.io" target="_blank">{{
                "评论 " + o
              }}</el-link>

              <el-link target="_blank" style="left: 100px">{{
                "登录名"
              }}</el-link>
            </div>
          </el-card>
        </el-aside>

        <!-- 中间 -->
        <el-main>
            <div class="four-function">
            <el-tabs v-model="activeName" type="card" stretch>
              <el-tab-pane label="新闻时事" name="first" > <home-news></home-news></el-tab-pane>
              <el-tab-pane label="公司动态" name="second"><CompanyDynamics></CompanyDynamics></el-tab-pane>
              <el-tab-pane label="大神风采" name="third" ><GreateStyle></GreateStyle></el-tab-pane>
              <el-tab-pane label="关于我们" name="fourth"><AboutUs></AboutUs></el-tab-pane>
              
            </el-tabs>
          </div>
        </el-main>
      </el-container>

      <!-- 底部 -->
      <el-footer style="height: 250px">
        <div style="margin-right: 70px">
          <el-row>
            <el-card :body-style="{ padding: '0px' }">
              <img src="" class="image" />
              <div style="padding: 30px">
                <div class="bottom clearfix">
                  <div>扫描关注公众号</div>
                </div>
              </div>
            </el-card>
          </el-row>
        </div>

        <div style="margin-right: 70px">
          <el-row>
            <el-card :body-style="{ padding: '0px' }">
              <img src="" class="image" />
              <div style="padding: 30px">
                <div class="bottom clearfix">
                  <div>扫描加微信群</div>
                </div>
              </div>
            </el-card>
          </el-row>
        </div>

        <div style="margin-right: 70x">
          <el-row>
            <el-card :body-style="{ padding: '0px' }">
              <img src="" class="image" />
              <div style="padding: 30px">
                <div class="bottom clearfix">
                  <div>扫描加QQ群</div>
                </div>
              </div>
            </el-card>
          </el-row>
        </div>

        <div style="margin-left: 60px">
          <el-link href="https://beian.miit.gov.cn/">闽ICP备51465413</el-link>
        </div>

        <div style="margin-left: 60px">
          <el-link type="primary">公安备案号 </el-link>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
// 关于我们
import AboutUs from '../YYB/AboutUs.vue'
// 公司动态
import CompanyDynamics from '../YYB/CompanyDynamics.vue'
// 新闻时事
import HomeNews from "../YYB/HomeNews.vue";
// 大神风采
import GreateStyle from '../YYB/GreateStyle.vue'
export default {
  name: "App",
  components: {
    HomeNews,
    CompanyDynamics,
    AboutUs,
    GreateStyle
  },
  data() {
    return {
      imgs_list:[
       
      {id:0,idView:require("../YYB/img/221310f3crw.jpg")},
      {id:1,idView:require("../YYB/img/221054bEiV2.jpg")},
      {id:2,idView:require("../YYB/img/231504xVYr7.jpg")},
      {id:3,idView:require("../YYB/img/2333296zENB.jpg")},
      {id:4,idView:require("../YYB/img/001313usLig.jpg")},
      ],
      activeName: "first",
      drawer: false,
      innerDrawer: false,
      direction: "rtl",
      circleUrl: "",
      form: {
        seen: false,
        name: "hh",
        date1: 2012 - 2 - 3,
        resource: "女",
        address: "sssssssss",
        desc: "sssssssssss",
      },
    };
  },
  methods: {
    edit() {
      console.log(this.form);
      this.form.seen = !this.form.seen;
      if (this.form.seen) {
        this.form.seen = true;
      } else {
        this.form.seen = false;
      }
    },
    save() {
      console.log(this.form);
      this.form.seen = false;
    },
  },
};
</script>

<style>
/* 页面头部代码 */
.el-header {
  background-color: #8ca8cc;
  color: #333;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
}

.header_title {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1000;
}

.sub-title {
  line-height: 60px;
}

.block {
  line-height: 70px;
}

/* 中间  */
.el-main {
  min-height: calc(100vh - 110px);
}

/* jio的 */
.el-footer {
  background-color: #eeeeee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* 轮播图的样式 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.carousel_title {
  margin-top: 50px;
}

/* 左侧榜单的样式 */

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.el-aside {
  line-height: 50px;
  background-color: rgb(171, 220, 236);
}

/* 二维码的样式 */

.bottom {
  margin-top: 70px;
  line-height: 40px;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}


</style>